import React from 'react';
import { useTranslation } from 'react-i18next';

interface SelectContentProps {
	array?: any[];
	onClick?: (data: any) => void;
	selectErrorMessage?: string;
	selectErrorMessageRole?: string;
	tabTypes?: string;
}

const SelectContent = (props: SelectContentProps) => {
	const { t } = useTranslation();
	const { array, onClick, selectErrorMessage, tabTypes, selectErrorMessageRole } = props;
	return (
		<div className="select-container">
			<div className="select-box">
				{array?.map((item, index) => {
					return (
						<div
							className={item.active ? 'active-select-item' : 'select-item'}
							key={index}
							onClick={() => {
								onClick && onClick(item);
							}}
						>
							<p className="select-text">{item.name !== 'normal' ? item.name : t('no-role')}</p>
						</div>
					);
				})}
			</div>
			{tabTypes === 'customerNameTabs' ? <p className="error-message">{selectErrorMessage}</p> : <p className="error-message">{selectErrorMessageRole}</p>}
		</div>
	);
};

export default SelectContent;
